<style lang="less">
.list-time-range{
  height: 30px;
  background: #fff;
  padding: 16px 10px 16px 10px;
  line-height: 30px;
  .ctx{
    background:#F9F9F9;
    border-radius:4px;
    .line{
      width:21px;
      height:1px;
      border-top:1px solid #333;
      display:block;
      margin:14px 30px 0;
    }
    .gray{
      color:#BFBFBF;
    }
    .weui-cell:before{
      border-top:0 none;
    }
    a{
      display:block;
      padding:0;
    }
  }
  .iconfont{
    padding:0 0 0 10px;
    font-size: 20px;
  }
}
</style>
<template>
<div class="list-time-range displayflex">
  <div class="ctx displayflex flex1">
    <datetime v-model="starttime" 
           :class="{'gray':!starttime}"
           format="YYYY-MM-DD" class="flex1 txt-rit"
           year-row="{value}年" month-row="{value}月" day-row="{value}日">{{starttime || "申请开始时间"}}</datetime>
    <span class="line"></span>
    <datetime v-model="endtime"
           :class="{'gray':!endtime}"
           format="YYYY-MM-DD" class="flex1"
           year-row="{value}年" month-row="{value}月" day-row="{value}日">{{endtime || "申请结束时间"}}</datetime>
  </div>
  <i class="iconfont icon-close" @click="clear" v-if="starttime || endtime"></i>
</div>
</template>

<script>
export default {
  data() {
    return {
      starttime:'',
      endtime:''
    };
  },
  watch: {
    starttime(val){
      var _this = this;
      if(val && this.endtime){
        this.$emit("changeTimeRange",_this.starttime,_this.endtime)
      }
    },
    endtime(val){
      var _this = this;
      if(val && this.starttime){
        this.$emit("changeTimeRange",_this.starttime,_this.endtime)
      }
    },
    
  },
  computed: {

  },
  created() {
    
  },
  methods: {
    clear(){
      this.starttime='';
      this.endtime='';
      var _this = this;
      this.$emit("changeTimeRange",_this.starttime,_this.endtime)
    }
  }
};
</script>